<template>
  <div class="topmenu">
    <div class="radius-box">
      <ul class="menu-list" :style="'background:' + data.bg_color">
        <li :style="{color: i == 0 ? data.active_text_color : data.text_color,background:i == 0 ? data.active_bg_color : data.bg_color}" v-for="(item, i) in data.list" :key="i" class="menu-item" v-bind:class="i == 0 ? 'active' : ''">
          <span>
            {{ item.name }}
            <i class="after" :style="'background:' + data.active_text_color"></i>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  }
};
</script>

<style lang="scss" scoped>
.topmenu {
  .radius-box {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .menu-list {
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    align-self: center;
    background: white;
    position: relative;
    white-space: nowrap;
    width: 375px;
    line-height: 40px;
    justify-content: center;
    width: fit-content;
    min-width: 100%;
    .menu-item {
      color: #666666;
      font-size: 14px;
      height: 40px;
      padding: 0 16px;
      min-width: 75px;
      line-height: 40px;
      box-sizing: border-box;
      border: 0;
      border-radius: 0;
      text-align: center;
      position: relative;
      cursor: pointer;
      flex-shrink: 0;
      &.active {
        .after {
          position: absolute;
          left: 50%;
          bottom: 0;
          -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
          width: 28px;
          height: 2px;
          background: #ef4f4f;
        }
      }
    }
  }
}
</style>
